<template>
    <div>
        <div class="videoWrap">
            <!-- TA的相关 更多推荐   -->
            <el-card shadow="always" :body-style="{ padding: '20px' }">
                <p class="title">TA的相关</p>
                <el-row :gutter="20">
                    <el-col :span="6" :offset="0">
                        <video-player class="video" src="https://vjs.zencdn.net/v/oceans.mp4"
                            poster="https://vjs.zencdn.net/v/oceans.png" :loop="true" :volume="0.6" :width="240"
                            :height="134" :duration="60" />
                        <span class="recText">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</span>
                        <el-icon class="videoIcon">
                            <VideoCamera />
                        </el-icon>
                        <span class="number">550</span>
                    </el-col>
                    <el-col :span="6" :offset="0">
                        <video-player class="video" src="https://vjs.zencdn.net/v/oceans.mp4"
                            poster="https://vjs.zencdn.net/v/oceans.png" :loop="true" :volume="0.6" :width="240"
                            :height="134" :duration="60" />
                        <span class="recText">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</span>
                        <el-icon class="videoIcon">
                            <VideoCamera />
                        </el-icon>
                        <span class="number">550</span>
                    </el-col>
                    <el-col :span="6" :offset="0">
                        <video-player class="video" src="https://vjs.zencdn.net/v/oceans.mp4"
                            poster="https://vjs.zencdn.net/v/oceans.png" :loop="true" :volume="0.6" :width="240"
                            :height="134" :duration="60" />
                        <span class="recText">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</span>
                        <el-icon class="videoIcon">
                            <VideoCamera />
                        </el-icon>
                        <span class="number">550</span>
                    </el-col>
                    <el-col :span="6" :offset="0">
                        <video-player class="video" src="https://vjs.zencdn.net/v/oceans.mp4"
                            poster="https://vjs.zencdn.net/v/oceans.png" :loop="true" :volume="0.6" :width="240"
                            :height="134" :duration="60" />
                        <span class="recText">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</span>
                        <el-icon class="videoIcon">
                            <VideoCamera />
                        </el-icon>
                        <span class="number">550</span>
                    </el-col>


                </el-row>
                <p class="title">更多推荐</p>
                <el-row :gutter="20">
                    <el-col :span="6" :offset="0">
                        <video-player class="video" src="https://vjs.zencdn.net/v/oceans.mp4"
                            poster="https://vjs.zencdn.net/v/oceans.png" :loop="true" :volume="0.6" :width="240"
                            :height="134" :duration="60" />
                        <span class="recText">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</span>
                        <el-icon class="videoIcon">
                            <VideoCamera />
                        </el-icon>
                        <span class="number">550</span>
                    </el-col>
                    <el-col :span="6" :offset="0">
                        <video-player class="video" src="https://vjs.zencdn.net/v/oceans.mp4"
                            poster="https://vjs.zencdn.net/v/oceans.png" :loop="true" :volume="0.6" :width="240"
                            :height="134" :duration="60" />
                        <span class="recText">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</span>
                        <el-icon class="videoIcon">
                            <VideoCamera />
                        </el-icon>
                        <span class="number">550</span>
                    </el-col>
                    <el-col :span="6" :offset="0">
                        <video-player class="video" src="https://vjs.zencdn.net/v/oceans.mp4"
                            poster="https://vjs.zencdn.net/v/oceans.png" :loop="true" :volume="0.6" :width="240"
                            :height="134" :duration="60" />
                        <span class="recText">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</span>
                        <el-icon class="videoIcon">
                            <VideoCamera />
                        </el-icon>
                        <span class="number">550</span>
                    </el-col>
                    <el-col :span="6" :offset="0">
                        <video-player class="video" src="https://vjs.zencdn.net/v/oceans.mp4"
                            poster="https://vjs.zencdn.net/v/oceans.png" :loop="true" :volume="0.6" :width="240"
                            :height="134" :duration="60" />
                        <span class="recText">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</span>
                        <el-icon class="videoIcon">
                            <VideoCamera />
                        </el-icon>
                        <span class="number">550</span>
                    </el-col>


                </el-row>
            </el-card>

            <!-- 相关练习室 -->
            <el-card shadow="always" style="margin-top: 20px;" >
                <p class="title">相关练习室</p>
                <el-row :gutter="20">
                    <el-col :span="6" :offset="0">
                        <img class="practiceImg" src="./1.jpg" alt="">
                    </el-col>
                    <el-col :span="6" :offset="0" class="PracticeText">
                        <h4 class="cate">哈哈哈哈</h4>
                        <span class="praContent">42个内容,19人已加入</span>
                        <button class="pracBtn">加入</button>
                    </el-col>
                    <el-col :span="6" :offset="0">
                        <img class="practiceImg" src="./1.jpg" alt="">
                    </el-col>
                    <el-col :span="6" :offset="0" class="PracticeText">
                        <h4 class="cate">哈哈哈哈</h4>
                        <span class="praContent">42个内容,19人已加入</span>
                        <button class="pracBtn">加入</button>
                    </el-col>
                </el-row>
              

            </el-card>

        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { VideoJsPlayer } from 'video.js'
import { VideoPlayer } from "@videojs-player/vue"
import "video.js/dist/video-js.css"
import {
    VideoCamera
} from "@element-plus/icons-vue"
const count = ref(20)
</script>

<style scoped>
/* 更多推荐 */
.title {
    font-size: 24px;
    font-weight: 500;
    margin: 10px 0 15px;
}

.recText {
    display: block;
    white-space: nowrap;
    /*规定文本不换行**/
    overflow: hidden;
    text-overflow: ellipsis;
    /**显示省略符号来代表被修剪的文本。*/
}

.videoIcon {
    vertical-align: middle;
}

.number {
    font-size: 12px;
    margin-left: 5px;
}

/* 相关练习室 */
.practiceImg {
    width: 240px;
    height: 134px;
}

.PracticeText {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: -15px;
    margin-left: -10px;
}

.cate {
    color: #111;
    font-size: 400;
}

.praContent {
    color: #7d809d;
    margin-top: -10px;
}

.pracBtn {
    color: #f93684;
    border: 1px solid #f93684;
    border-radius: 20px;
    width: 60px;
    height: 30px;
    background: #fff;
}
</style>